<template>
  <form @submit.prevent="submitForm">
    <div>
      <label for="name">姓名</label>
      <input type="text" id="name" v-model="form.name" required />
    </div>
    <div>
      <label for="email">电子邮件</label>
      <input type="email" id="email" v-model="form.email" required />
    </div>
    <div>
      <label for="message">问题描述</label>
      <textarea id="message" v-model="form.message" required></textarea>
    </div>
    <button type="submit">提交请求</button>
  </form>
</template>

<script>
export default {
  name: "ContactForm",
  data() {
    return {
      form: {
        name: "",
        email: "",
        message: "",
      },
    };
  },
  methods: {
    submitForm() {
      alert(`您的请求已提交！\n姓名: ${this.form.name}\n邮箱: ${this.form.email}\n问题描述: ${this.form.message}`);
      this.form.name = "";
      this.form.email = "";
      this.form.message = "";
    },
  },
};
</script>

<style scoped>
form {
  display: grid;
  gap: 1rem;
}

label {
  font-weight: bold;
}

input,
textarea {
  width: 100%;
  padding: 0.5rem;
  border-radius: 5px;
  border: 1px solid #ccc;
}

button {
  background-color: #007bff;
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}
</style>
